<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--省份、城市、区域-->
		<select name="" id="province">
			<option value="-1">请选择</option>
		</select>
		<select name="" id="city">
			<option value=""></option>
		</select>
		<select name="country" id="country">
			<option value=""></option>
		</select>
	</body>
	<script type="application/javascript">
		var provinceArr = ['浙江','江苏',"河南"];
		var cityArr = [
			['杭州','宁波','温州','台州'],
			['南京','无锡','苏州','扬州','南通'],
			['郑州','开封','洛阳','焦作','商丘','平顶山']
		];
		var countryArr = [
			[
				['余杭区','下沙区','西湖区'],
				['宁波1','宁波2'],
				['鹿城区','瓯海区','龙湾区'],
				['台州1','台州2']
			],
			[
				['南京1','南京2'],
				['太湖区','市区','高新区'],
				['太阳','滨江'],
				['扬州1','扬州2'],
				['南通']
			],
			[
				['二七区','高校区'],
				['开封1','开封2'],
				['洛阳1'],
				['三阳区','市区','边区'],
				['㫿阳区','宁阳区'],
				['平顶山1','平顶山2']
			]
		];
		
		function createOption(obj ,data){
			for(var i in data){
				var op = new Option(data[i],i);
				obj.options.add(op);
			}
		}
		/*省份*/
		var province = document.getElementById("province");
		createOption(province,provinceArr);
		/*省份对应的城市*/
		var city = document.getElementById("city");
		var country = document.getElementById("country");
		province.onchange= function(){
			city.options.length=0;
			createOption(city,cityArr[province.value]);
			//如果选择了-1，则将区域清空，否自动添加城市对应的区域信息
			if(province.value<0){
				country.options.length=0;
			}else{
				city.onchange();
			}
		}
		/*城市对应的地区*/
		
		city.onchange = function(){
			country.options.length=0;
			createOption(country,countryArr[province.value][city.value]);
		}
	</script>
</html>
